<template>
  <div class="topBar">
    <template v-if="showOne.indexOf(father) !== -1">
      <el-button size="mini" type="primary" @click="filterMessage">筛选</el-button>
    </template>
    <template v-else>
      <el-button size="mini" type="primary" @click="filterMessage">筛选</el-button>
      <el-button size="mini" type="warning" @click="open">继续任务</el-button>
      <el-button size="mini" type="success" @click="dialogVisible = true">任务管理</el-button>
    </template>

    <el-dialog
      title="任务列表"
      :visible.sync="dialogVisible"
    >
      <tb-table />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import TbTable from './TbTable'
export default {
  name: 'TopBar',
  components: {
    TbTable
  },
  props: {
    filterParma: {
      type: String,
      default: null
    },
    //  用来确定是那个标签
    father: {
      type: String,
      default: null
    },
    // 由传入的数据进行赋值
    editableTab: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showOne: ['EmergencyCases', 'IncourtCases', 'OutpatientCases', 'TheHospitalCases'],
      dialogVisible: false
    }
  },
  methods: {
    filterMessage() {
      //  点击按钮后，将这个事件传给父组件
      this.$emit('filterMessage')
      //  在父组件中需要获取信息的标志传给各自组件
      //  信息组件通过检测这个值把值传给父组件，在进一步进行数据库操作
    },
    open() {
      this.$alert('没有任务需要继续完成', '继续任务', {
        confirmButtonText: '确定'
      }
      )
    }
  }
}
</script>

<style scoped lang="scss">
  .topBar {
    padding: 10px 0px;
  }
  .el-button{
    margin-right: 20px;
  }
</style>
